{{extend defaultLayout}}

{{block 'css'}}
<link rel="stylesheet" type="text/css" href="{{_res_path}}Template/musicList/musicList.css"/>
{{/block}}

{{block 'main'}}
<div class="container">
    <!-- 背景渐变 -->
    <div class="background-gradient"></div>
    
    <!-- 头部区域 -->
    <div class="header">
        <div class="header-decoration"></div>
        <div class="header-title">{{listTitle}}</div>
        <div class="header-subtitle">{{subtitle}}</div>
        <div class="header-count">共 {{totalCount}} 首歌曲</div>
    </div>
    
    <!-- 使用提示 -->
    <div class="usage-tip">
        <div class="tip-text">使用 <span class="command">^点歌 [序号] 进行播放</span> 或 <span class="command">^鼠鼠音乐列表(排行榜) [页码]</span> 进行翻页</div>
    </div>
    
    <!-- 音乐列表区域 -->
    <div class="music-list">
        {{each musicList item index}}
        <div class="music-item {{if index < 3}}top-rank{{/if}}">
            <!-- 序号标记 -->
            <div class="music-index {{if index < 3}}top-index{{/if}}">{{item.index}}</div>
            
            <!-- 封面图片 -->
            <div class="music-cover-container">
                {{if item.cover}}
                <img class="music-cover" src="{{item.cover}}" onerror="this.src='{{_res_path}}Template/musicList/images/default-cover.png'" />
                {{else}}
                <img class="music-cover" src="{{_res_path}}Template/musicList/images/default-cover.png" />
                {{/if}}
                {{if index < 3}}
                <div class="top-badge">TOP{{index + 1}}</div>
                {{/if}}
            </div>
            
            <!-- 音乐信息 -->
            <div class="music-info">
                <div class="music-name">{{item.name}}</div>
                <div class="music-artist">{{item.artist}}</div>
                <div class="music-meta">
                    {{if item.playlist}}
                    <span class="music-playlist">📀 {{item.playlist}}</span>
                    {{/if}}
                    {{if item.hot}}
                    <span class="music-hot">🔥 {{item.hot}}</span>
                    {{/if}}
                </div>
            </div>
            
            <!-- 点歌命令 -->
            <div class="music-command">
                <div class="command-text">^点歌 {{item.index}}</div>
            </div>
        </div>
        {{/each}}
    </div>
    
    <!-- 底部信息 -->
    <div class="footer">
        <div class="footer-tip">列表有效期2分钟</div>
        <div class="plugin-watermark">音乐由 @Liusy 整理；@浅巷墨黎 提供接口</div>
    </div>
</div>
{{/block}}

